Component({
  relations: {
    './cell-select-group': {
      type: 'parent',
      linked(target) {
        let temp = target.data.type
        this.setData({
          temp
        })
      },
      linkChanged(target) {},
      unlinked(target) {}
    }
  },
  properties: {
    value: String,
    label: String,
    active: {
      type: Boolean,
      value: false
    },
    disabled: Boolean
  },
  options: {
    addGlobalClass: true
  },
  data: {
    temp: 'radio',
    active: false
  },
  methods: {
    clickHandler() {
      const { disabled } = this.data
      if (disabled) {
        return
      }
      if (this.data.temp === 'radio') {
        if (!this.data.active) {
          // this.data.active = true
          let parent = this.getRelationNodes('./cell-select-group')[0]
          let children = parent.getRelationNodes('./cell-select-item')
          children.forEach(item => {
            item.data.active = item === this ? true : false
            item.setData({
              active: item.data.active
            })
          })
          let values = children.map(item => {
            return {
              value: item.data.value,
              checked: item.data.active ? true : false
            }
          })
          parent.triggerEvent('change', { current: this.data.index, values })
        }
      }
      if (this.data.temp === 'checkbox') {
        this.data.active = !this.data.active
        this.setData({
          active: this.data.active
        }, () => {
          let parent = this.getRelationNodes('./cell-select-group')[0]
          let children = parent.getRelationNodes('./cell-select-item')
          let value = children.map(item => {
            return {
              value: item.data.value,
              checked: item.data.active ? true : false
            }
          })
          parent.triggerEvent('change', value)
        })
      }
    }
  }
})
